<!DOCTYPE>
<html>
	<head>
		<script type="text/javascript" src="src/Tools.js"></script>
		<script type="text/javascript" src="src/Tile.js"></script>
		<script type="text/javascript" src="src/Map.js"></script>
		<script type="text/javascript" src="src/Picker.js"></script>
		<link rel="stylesheet" type="text/css" href="css/layout.css">
	</head>
	<body style="text-align:center">
		<div id="fps-counter"></div>
		<div id="tiles_container">
			<!-- <canvas id="scroll">
			</canvas> -->

		</div>
		<canvas id="canvas"></canvas>
		<script>
			var canvas = $('canvas');
			var scroll = $('scroll');
			var ctx = canvas.getContext('2d');
			// var ctxForScroll = scroll.getContext('2d');

			requestAnimFrame = (function(w) {
				return  w.requestAnimationFrame ||
				 w.webkitRequestAnimationFrame ||
				 w.mozRequestAnimationFrame ||
				 w.oRequestAnimationFrame ||
				 w.msRequestAnimationFrame ||
				 function(c,e) {
					w.setTimeout(c, 100/6);
				 };
			})(window);

			// $('canvas').width = width();
			// $('canvas').height = height();
			$('canvas').width = 800;
			$('canvas').height = 672;
			// $('scroll').width = 128;
			// $('scroll').height = 2816;

			window.run = function() {
				update();
				draw();
				// calculateFPS();
				requestAnimFrame(run);
			}

			window.update = function() {
				map.update();
			}

			window.draw = function() {
				map.render(ctx);
			}

			map = new Map();
			picker = new Picker();
			map.init();
			picker.init('tiles_container');
			run();
		</script>
	</body>
</html>